 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
 <body>
     
<style type="text/css" media="screen">
    /* .box{
        display: flex;
        margin:100px auto;
        width:400px;
        height:200px;
        background-color: red;
    }
    .inner{
        /* width:100px; */
        /* height:100px; */
        /* 他会干掉盒子的宽度 */
        /* flex-basis:200px; */
        /* background:pink; */
        /* 扩大空间，填充父盒子剩下的空间 */
        /* flex-grow: 1; */
    /* }
    .inner1{
            flex-basis:300px;
            height:100px;
            background:blue;
            flex-grow: 2;
    } */
    .box{
        display: flex;
        width: 400px;
        height: 200px;
        background-color: red;
        margin: 100px auto;
    }
    .inner{
        flex-basis: 200px;
        height: 200px;
        background-color: burlywood;
        flex-shrink: 0;
    }
    .inner1{
        flex-basis: 300px;
        height: 200px;
        background-color:pink;
        /* 1是减小子盒子   0是不变化*/
        flex-shrink: 1;
    }
</style>
</head>
<body>
<div class="box">
<div class="inner">
</div>
<div class="inner1">

</div>
</div>
 </body>
 </html>